<template>
 <div class="writeBlog">
     <div class="container-fluid">
         <div class="row p-2">
             <router-link class="col-1 text-left" to="/homePage/shareSquare"> <i class="iconfont icon-fanhui"></i></router-link>
             <div class="col-9 col-lg-10 p-0 text-center">写文章</div>
             <div class=" col-1 pl-4 col-lg-1 text-right releaseBtn" @click="uploadimg"><i class="iconfont icon-fabu "></i><span class="d-none d-lg-inline ml-1">发布</span> </div>
         </div>
     </div>
     <div class="input-group mb-3">
         <div class="input-group-prepend">
             <span class="input-group-text">标题：</span>
         </div>
         <input type="text" placeholder="输入标题" v-model="title" class="form-control">
     </div>
     <div class="col-12 p-2 text-green d-flex justify-content-center">
         <div class="form-check mr-2">
            <input class="form-check-input" type="radio" name="exampleRadios" v-model="type" id="exampleRadios2" value="tec">
            <label class="form-check-label" for="exampleRadios2">
                博客
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" v-model="type" id="exampleRadios2" value="live">
            <label class="form-check-label" for="exampleRadios2">
                日记
            </label>
        </div>
     </div>
     <mavon-editor class="position-relative mavonEditor"
       :codeStyle="codeStyle"
      :toolbars="markdownOption" :ishljs = "true" :subfield="true" v-model="handbook" ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" />
 </div>
</template>

<script>
// import hljs from "@/assets/code/highlight.js";
 import 'mavon-editor/dist/css/index.css'
 export default {
   data () {
     return {
    codeStyle:"monokai-sublime",//主题
    title:"",
    type:'tec',
    handbook:"",
    img_file: {},//文章的图片
    markdownOption: {
        bold: true, // 粗体
        bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: true, // 标记
      superscript: true, // 上角标
      subscript: true, // 下角标
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏编辑
      readmodel: true, // 沉浸式阅读
      htmlcode: false, // 展示html源码
      help: true, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
      save: true, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: true, // 导航目录
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
      /* 2.2.1 */
      subfield: true, // 单双栏模式
      preview: true, // 预览
      }
     }
   },
   methods:{
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 缓存图片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
            delete this.img_file[pos];
        },
        releaseArticle(id,img){
            console.log(id)
            console.log(img)
             this.$axios({
                        url:this.$url+'releaseArticle',
                        method:'post',
                        data:{
                            id:id,
                            title:this.title,
                            belongId:"cds",
                            content:this.handbook,
                            img:img,
                            type:this.type,
                            fileId:this.$util.randomId('file'),
                            },
                        headers: { 'Content-Type': 'application/json; charset=utf-8' },
                    }).then(rest=>{

                        this.$message({
                            type: 'info',
                            message: `发布成功`
                        });
                        this.$router.push({path:'/homePage'})
                        this.title = "";
                        this.content = "";

                    }).catch(e=>{
                        console.log(e)
                    })
        },
        uploadimg($e){
            console.log(this.img_file)
            let that = this;
            if(this.title&&this.handbook){
                console.log(this.handbook);
                let id = this.$util.randomId();
                // 第一步.将图片上传到服务器.
               if(this.img_file[1]){
                 var formdata = new FormData();
                 for(var _img in this.img_file){
                     formdata.append(_img, this.img_file[_img]);
                 }
                 formdata.append("userId", "cdm22");
                 formdata.append("articleId",id );
                 this.$axios({
                     url: this.$url+'upLoadFile',
                     method: 'post',
                     data: formdata,
                     headers: { 'Content-Type': 'multipart/form-data' },
                 }).then((res) => {
                     let temp = res.data.data;
                     console.log(res)
                     /**
                      * 例如：返回数据为 res = [[pos, url], [pos, url]...]
                      * pos 为原图片标志（0）
                      * url 为上传后图片的url地址
                      */
                     // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                     for (var img in temp) {
                         // $vm.$img2Url 详情见本页末尾
                         this.$refs.md.$img2Url(temp[img][0], temp[img][1]);
                     }
                    return temp[0][1];
                 }).then(img=>{
                      that.releaseArticle(id,img);
                 })

                 .catch(e=>{
                     console.log(e)
                 })

               }else{
                 that.releaseArticle(id,'https://www.yangqq.com/d/file/news/s/2020-04-02/b06f0385e0e4226794339fdd31419036.jpg');
               }

            }else{
                 this.$message({
                    type: 'info',
                    message: `请输入完整内容`
                });
            }
        },

   },

   components: {

   },
   watch:{
     type(new1,old){
       console.log(new1)
     }
   }
 }
</script>

<style scoped lang='less'>
.mavonEditor{
  width: 100%;
  height: 90%;
}
.writeBlog {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.icon-fabu{
    color:#3399ea;
}
// .发布按钮
.releaseBtn{
    cursor: pointer;
}
</style>
